<template>
  <div class="sale-container">
    <div ref="saleChart" class="sale-chart" />
  </div>
</template>

<script>
export default {
  name: 'Sale',
  components: {},
  props: {},
  data () {
    return {
      startValue: 0,
      endValue: 9,
      timer: null,
      myChart: null
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    initChart () {
      this.myChart = this.$echarts.init(this.$refs.saleChart)
      const option = {
        title: {
          text: '销售额趋势',
          textStyle: {
            color: '#333',
            fontSize: 18
          },
          left: '0%',
          top: '3%'
        },
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          show: true
        },
        grid: {
          containLabel: true,
          bottom: '2%',
          left: '3%',
          right: '3%'
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: {
          type: 'slider',
          show: false,
          startValue: 0,
          endValue: 9
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 80, 70, 110, 130, 80, 70],
            type: 'bar',
            // 给柱状图加圆角,数组中的四个数字依次为柱状图的左上，右上，右下，左下）
            itemStyle: {
              borderRadius: [50, 50, 0, 0],
              color: params => {
                if (params.value > 100) {
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#845EC2' },
                    { offset: 1, color: '#D65DB1' }
                  ])
                } else if (params.value > 150) {
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#CC550B' },
                    { offset: 1, color: '#C9394F' }
                  ])
                } else {
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#5353ee' },
                    { offset: 1, color: '#a86de5' }
                  ])
                }
              }
            }
          }
        ]
      }
      this.myChart.setOption(option)
      this.chartsScroll()
    },
    chartsScroll () {
      this.timer = setInterval(() => {
        this.startValue = this.startValue + 1
        this.endValue = this.endValue + 1
        if (this.endValue > 12) {
          this.startValue = 0
          this.endValue = 9
        }
        const options = {
          dataZoom: {
            startValue: this.startValue,
            endValue: this.endValue
          }
        }
        this.myChart.setOption(options)
      }, 3000)
    }
  },
  beforeDestoryed () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style scoped lang="less">
.sale-container {
  width: 100%;
  height: 100%;
  .sale-chart {
    width: 100%;
    height: 300px;
  }
}
</style>
